<template>
    <Card title="累计用户总数" value="888,888,8">
      <div ref="barChartRef" style="width: 100%; height: 100%"></div>
  
      <template #footer>
        <div class="sale">
        <div class="emphasis">日同比&nbsp;-19.82%&nbsp;<span class="reduce"></span></div>
        <div class="emphasis">月同比&nbsp;56.88%&nbsp;<span class="add"></span></div>
      </div>
      </template>
    </Card>
  </template>
  
  <script lang="ts">
  import Card from "./Card.vue";
  import axios from "axios";
  export default {
    name: "TodayOrder",
    components: {
      Card,
    },
  };
  </script>
  
  <script lang="ts" setup>
  import * as echarts from "echarts";
  import type { EChartsType } from "echarts";
  import { ref, onMounted } from "vue";
  //定义页面中的标签对象 柱状图
  const barChartRef = ref();
  let barChart: EChartsType;
  //准备配置项 根据配置内容生成图形结构
  const getOption = () => {
    return {
      //位置
      grid: {
        // left: 0,
        // right: 0,
        top: 0,
        bottom: 0,
      },
      xAxis: {
        min:0,
        max:100,
        
        show:false, //是否显示水平值,
         // x轴数据列表
      },
      yAxis:{
          show:false,//垂直线
          data: [
          "一月",
          
        ],
      },
  
      series:[{
          name: '实时订单数',
          //图像形式bar柱状图
          type: 'bar',
          // data: orderTrend.value,
          data: [44],
          barWidth:10,
          //是否显示柱状图的背景颜色
          showBackground:true,
          //引导线
          label:{
            show:true,
            formatter:'|',
            position:'right',
            color:'red'
          },
          
      }],
      //显示提示
      tooltip:{
          trigger:'axis',
          confine:true
      }
    };
  };
  onMounted(()=>{
      barChart = echarts.init(barChartRef.value);
      barChart.setOption(getOption());
  })
  </script>
  <style lang="scss" scoped>
  .sale{
    display: flex;
    align-items: center;
  }
  </style>
  